<template>
	<view class="order">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<gyd-tabs :list="tabsList" @clickItem="changeTab"></gyd-tabs>

		<view class="order-list">
			<view class="order-card" v-for="(item,index) in list" :key="index" @click="pageToDetail(item.id)">
				<view class="header">
					<text class="NO">订单：{{item.order_sn}}</text>
					<text class="status" v-if="item.order_status==3">已取消</text>
					<text class="status" v-if="item.pay_status==0 && item.order_status==0">待支付</text>
					<text class="status" v-if="item.pay_status==1 && item.shipping_status==0">待配送</text>
					<text class="status" v-if="item.pay_status==1 && item.shipping_status==1">待收货</text>
					<text class="status" v-if="item.pay_status==1 && item.order_status==4">已完成</text>
				</view>

				<view class="bd" v-for="(goods,goods_index) in item.goods_list" :key="goods_index">
					<image class="thumb" :src="goods.logo" mode="aspectFill"></image>
					<view class="info">
						<view class="name">{{goods.goods_name}}</view>
						<view class="spec">已选 {{goods.spec_key_name}}</view>
						<view class="other">
							<text class="price">{{goods.sale_price}}</text>
							<text class="count">x{{goods.goods_num}}</text>
						</view>
					</view>
				</view>

				<view class="footer">
					<view class="amount">
						实付:
						<text class="value">￥{{item.order_amount}}</text>
					</view>
					<view class="btn-group">
						<u-button class="btn" size="mini" @click="pageToDetail(item.id)">查看订单</u-button>
						<u-button class="btn" type="success" size="mini"
							v-if="item.pay_status==0 && item.order_status==0" @click="goPay(item.id)">去支付</u-button>
						<u-button class="btn" type="error" size="mini" v-if="item.pay_status==0 && item.order_status==0"
							@click="operate(item.id, 'cancel')">取消订单</u-button>
						<u-button class="btn" type="primary" size="mini"
							v-if="item.pay_status==1 && item.shipping_status==1"
							@click="operate(item.id, 'receive')">确认收货</u-button>
					</view>
				</view>
			</view>

			<view class="empty-data" v-if="list.length===0">暂无订单数据</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '代客订单',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		store_id: 0,
		current: 0,
		tabsList: ['全部', '待支付', '待配送', '待收货', '已完成'],
		isMore: true,
		list: []
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		let selStore = cache.get('selStore');
		if (selStore) {
			state.store_id = selStore.id;
		}
		getList();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		state.isMore = true;
		state.list = [];
		getList();
	})

	onReachBottom(() => {
		console.log('触底加载更多');
		getList();
	})

	function getList() {

	}

	function changeTab(index) {
		state.current = index;
		state.isMore = true;
		state.list = [];
		getList();
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		store_id,
		current,
		tabsList,
		isMore,
		list
	} = toRefs(state);
</script>

<style lang="scss">
	.order {
		.order-list {
			padding: $m24;

			.order-card {
				margin-bottom: $m24;
				padding: 0 $m24;
				background-color: #fff;
				border-radius: $radius-16;

				.header {
					@include f-between($align: center);
					padding: $m24 0;
					border-bottom: 1rpx solid $border-color;

					.status {
						font-size: $font-28;
						color: $tips-color;
					}
				}

				.bd {
					@include f-between($align: center);
					padding: $m24 0;

					.thumb {
						width: 148rpx;
						height: 148rpx;
						background-color: #F7F7FB;
						border-radius: $radius-8;
					}

					.info {
						position: relative;
						flex: 1;
						height: 148rpx;
						margin-left: $m24;

						.name {
							@include ellipsis;
							color: $main-color;
							font-weight: 500;
						}

						.spec {
							margin-top: $m8;
							font-size: $font-24;
							color: $tips-color;
						}

						.other {
							@include f-between($align: center);
							position: absolute;
							bottom: 0;
							width: 100%;

							.price {
								color: $primary-color;
								font-weight: 500;
							}
						}
					}
				}

				.footer {
					@include f-between($align: center);
					padding: $m24 0;
					border-top: 1rpx solid $border-color;

					.amount {
						color: $main-color;

						.value {
							color: $primary-color;
							font-size: $font-32;
							font-weight: bold;
						}
					}

					.btn-group {
						display: flex;
						justify-content: flex-end;

						:deep(.u-button) {
							margin-left: $m20;
						}
					}
				}
			}

			.empty-data {
				margin-bottom: $m24;
				padding: $m24;
				background-color: #fff;
				border-radius: $radius-16;
				text-align: center;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>